<template>
    <div>
        <el-form ref="form" :model="Form" label-width="50px">
            <el-form-item label="选择时间" prop="startTime">
                <el-date-picker
                        v-model="Form.startTime"
                        type="daterange"
                        format="yyyy-MM-dd "
                        value-format="yyyy-MM-dd"
                        clearable
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
                <span>商品分类:</span>
                <el-input v-model="goodsType" style="width: 150px;" clearable placol请der="输入内容"></el-input>

                <span>商品的名称:</span>
                <el-input v-model="goodsName" style="width: 150px;" clearable placol请der="输入内容"></el-input>
<!--                <div style="margin-left: 75%">-->
                    <el-button style="margin-left: 10px;" type="primary" @click="select" icon="el-icon-search">搜索</el-button>
                    <el-button  type="primary" @click="lossApplication">申请损耗</el-button>
<!--                </div>-->
                <el-dialog style="margin-left: 20px;" title="损耗申请" :visible.sync="dialogFormVisible" width="34%"
                           center>
                    <el-form ref="subForm" :rules='rules' :model="subForm" label-width="100px">
                        <el-form-item label="商品分类" prop="goodsType">
                            <el-select v-model="subForm.goodsType" @blur.native.capture="getLossGoodsName" clearable
                                       placeholder="请选择">
                                <el-option
                                        v-for="item in subForm.select1"
                                        :key="item.goodsType"
                                        :label="item.goodsType"
                                        :value="item.goodsType">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <br>
                        <el-form-item label="商品名称" prop="goodsName">
                            <el-select v-model="subForm.goodsName" clearable placeholder="请选择">
                                <el-option
                                        v-for="item in subForm.select2"
                                        :key="item.goodsName"
                                        :label="item.goodsName"
                                        :value="item.goodsName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <br>
                        <el-form-item label="损耗数量" prop="lossNum">
                            <el-input style="width: 209px" v-model="subForm.lossNum"
                                      clearable
                                      placeholder="请输入内容"
                                      maxLength='9'></el-input>
                        </el-form-item>
                        <br>
                        <el-form-item label="单位" prop="goodsUnit">
                            <el-select v-model="subForm.goodsUnit" clearable @blur.native.capture="" placeholder="请选择">
                                <el-option
                                        v-for="(index,val) in subForm.select3"
                                        :key="val"
                                        :label="index"
                                        :value="index">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <br>
                        <el-form-item label="损耗原因" prop="desc">
                            <el-input style="width: 209px" type="textarea" v-model="subForm.desc" :rows="2"></el-input>
                        </el-form-item>
                        <br>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="verification">确 定</el-button>
                    </div>
                </el-dialog>
            </el-form-item>
        </el-form>
        <div>
            <!--表格-->
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        label="序号"
                        type="index"
                        :index="indexMethod"
                        width="50">
                </el-table-column>

                <el-table-column
                        prop="lossTime"
                        label="申请时间"
                        width="160"
                >
                </el-table-column>
                <el-table-column
                        prop="goodsType"
                        label="商品分类"
                >
                </el-table-column>
                <el-table-column
                        prop="goodsName"
                        label="商品名称"
                >
                </el-table-column>
                <el-table-column
                        prop="lossNum"
                        label="损耗数量"
                >
                </el-table-column>
                <el-table-column
                        prop="goodsUnit"
                        label="商品单位">
                </el-table-column>
                <el-table-column
                        prop="lossDescription"
                        label="损耗原因"
                        width="160">
                </el-table-column>
                <el-table-column
                        prop="stateType"
                        label="申请状态"
                        width="100">
                </el-table-column>

                <el-table-column label="操作" width="160">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="danger"
                                v-if="scope.row.stateType =='审核通过'"
                                @click="handleDelete(scope.$index, scope.row)">移除
                        </el-button>
                        <el-button
                                size="mini"
                                type="info"
                               v-if="scope.row.stateType !='审核通过'"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-dialog style="margin-left: 20px" title="修改申请" :visible.sync="dialogForm" width="34%"
                                   center>
                            <el-form ref="subForm" :rules='rules' :model="sbForm" label-width="80px">
                                <el-form-item label="商品分类" prop="goodsType">
                                    <el-select v-model="sbForm.goodsType" @blur.native.capture="getLossGoodsName1" clearable
                                               placeholder="请选择">
                                        <el-option
                                                v-for="item in sbForm.select1"
                                                :key="item.goodsType"
                                                :label="item.goodsType"
                                                :value="item.goodsType">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <br>
                                <el-form-item label="商品名称" prop="goodsName">
                                    <el-select v-model="sbForm.goodsName" clearable placeholder="请选择">
                                        <el-option
                                                v-for="item in sbForm.select2"
                                                :key="item.goodsName"
                                                :label="item.goodsName"
                                                :value="item.goodsName">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <br>
                                <el-form-item label="损耗数量" prop="lossNum">
                                    <el-input style="width: 209px" v-model="sbForm.lossNum"
                                              clearable
                                              placeholder="请输入内容"
                                              maxLength='9'></el-input>
                                </el-form-item>
                                <br>
                                <el-form-item label="单位" prop="goodsUnit">
                                    <el-select v-model="sbForm.goodsUnit" clearable @blur.native.capture="" placeholder="请选择">
                                        <el-option
                                                v-for="(index,val) in sbForm.select3"
                                                :key="val"
                                                :label="index"
                                                :value="index">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <br>
                                <el-form-item label="损耗原因" prop="desc">
                                    <el-input style="width: 209px" type="textarea" v-model="sbForm.desc" :rows="2"></el-input>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogForm = false">取 消</el-button>
                                <el-button type="primary" @click="updateData(scope.$index, scope.row)">确 定</el-button>
                            </div>
                        </el-dialog>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <!--
            size-change：选择每页显示几行
            current-change：上一页 下一页
            current-page：当前页
            page-sizes：一页显示多少行的集合
            page-size：一页显示多少行
            total：总条数
                 -->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page=page
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size=size
                    layout="total, sizes, prev, pager, next, jumper"
                    :total=total>
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'OutInf',
        mounted() {//默认第一次加载
            initTable(this)
        },
        data() {
            return {
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now()
                    }
                },
                dialogFormVisible: false,
                dialogForm:false,
                tableData: [],
                total: 0,
                page: 1,
                size: 5,
                goodsType: '',
                goodsName: '',
                Form: {
                    startTime: '',
                    overTime: ''
                },
                sbForm:{
                    goodsName: '',
                    goodsType: '',
                    lossNum: '',
                    goodsUnit: '',
                    desc:'',
                    select1: [],
                    select2: [],
                    select3: [],
                },
                subForm: {
                    goodsName: '',
                    goodsType: '',
                    lossNum: '',
                    goodsUnit: '',
                    desc:'',
                    select1: [],
                    select2: [],
                    select3: [],
                },
                rules: {

                    goodsName: [
                        {
                            required: true,
                            message: '商品的种类必须选',
                            trigger: ['blur', 'change']
                        }
                    ],
                    goodsType: [
                        {
                            required: true,
                            message: '商品的类型必须选',
                            trigger: ['blur', 'change']
                        }
                    ],

                    lossNum: [
                        {
                            required: true,
                            message: '损耗的数量必须填写',
                            trigger: 'blur',
                        }
                    ],
                    goodsUnit: [
                        {
                            required: true,
                            message: '商品的单位必须选',
                            trigger: 'blur'
                        }
                    ],
                    desc: [
                        {
                            required: true,
                            message: '损耗原因必填',
                            trigger: 'blur'
                        }
                    ],
                }
            }
        },
        methods: {
            select() {
                if (this.Form.startTime.toString().split(",")[0] == this.Form.startTime.toString().split(",")[1]) {
                    this.$message("温馨提示：开始日期和结束日期不能一致，请重新选择！")
                    return false
                }
                // alert(this.goodsType)
                initTable(this)
            },
            //以下是表格部分的方法
            indexMethod(index) {
                return index + 1
            },
            handleSizeChange(val) {
                this.size = val
                initTable(this)
                console.log(`每页 ${val} 条`)
            },
            handleCurrentChange(val) {
                this.page = val
                initTable(this)
                console.log(`当前页: ${val}`)
            },
            //数据表格移除的方法
            handleDelete(index, row) {
                this.$confirm('是否执行此操作, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post("delLossInfo", {
                        id: row.id,
                    }).then(resp => {
                        if (resp.data == "移除成功") {
                            this.$message.success(resp.data)
                            initTable(this)
                            return false
                        }
                        this.$message.error(new Error(resp.data))
                    })
                }).catch(() => {
                });
            },
            //以下是添加损耗方面数据方法
            //自定义校验规则
            verification() {
                if (this.subForm.goodsName == null || this.subForm.goodsName === '') {
                    this.$message.error(new Error('商品的分类必须选'))
                    return false
                }
                if (this.subForm.goodsType == null || this.subForm.goodsType === '') {
                    this.$message.error(new Error('商品的名称必须选'))
                    return false
                }
                if (this.subForm.lossNum == null || this.subForm.lossNum === '') {
                    this.$message.error(new Error('损耗数量必须填写'))
                    return false
                } else {
                    let r = /^[1-9]\d*$/
                    if (!r.test(this.subForm.lossNum)) {
                        this.$message.error(new Error('商品的数量必须为正整数(0除外)'))
                        return false
                    }
                }
                if (this.subForm.goodsUnit == null || this.subForm.goodsUnit === '') {
                    this.$message.error(new Error('商品的单位必须选'))
                    return false
                }
                if (this.subForm.desc == null || this.subForm.desc === '') {
                    this.$message.error(new Error('损耗原因必填'))
                    return false
                }

                //添加的数据发往后台
                this.$axios.post("addLossInfo", {
                    goodsType: this.subForm.goodsType,
                    goodsName: this.subForm.goodsName,
                    lossNum: this.subForm.lossNum,
                    goodsUnit: this.subForm.goodsUnit,
                    lossDescription:this.subForm.desc
                }).then(resp => {
                    this.dialogFormVisible = false
                    if (resp.data == '申请成功') {
                        this.$message.success(resp.data)
                    } else {
                        this.$message.error(new Error(resp.data))
                    }
                    this.$refs['subForm'].resetFields()
                    initTable(this)
                })

            },
            //申请损耗按钮弹窗和获取商品的分类
            lossApplication() {
                this.dialogFormVisible=true
                this.$axios.post('getLossGoodsType').then(resp => {
                    if (resp) {
                        this.subForm.select1 = resp.data.goodsType
                    }
                })
            },
            //获得商品的名称
            getLossGoodsName() {
                // alert(this.subForm.goodsName)
                this.$axios.post('getLossGoodsName', {
                    goodsType: this.subForm.goodsType,
                }).then(resp => {
                    if (resp) {
                        // console.log(resp.data.goodsList)
                        this.subForm.select2 = resp.data.goodsName
                        this.subForm.select3 = resp.data.goodsUnit
                        // console.log(this.subForm.select3)
                    }
                })
            },
            //获得商品的名称
            getLossGoodsName1() {
                // alert(this.subForm.goodsName)
                this.$axios.post('getLossGoodsName', {
                    goodsType: this.sbForm.goodsType,
                }).then(resp => {
                    if (resp) {
                        // console.log(resp.data.goodsList)
                        this.sbForm.select2 = resp.data.goodsName
                        this.sbForm.select3 = resp.data.goodsUnit
                        // console.log(this.subForm.select3)
                    }
                })
            },
            //
            updateData(index,row){
                if (this.sbForm.goodsName == null || this.sbForm.goodsName === '') {
                    this.$message.error(new Error('商品的分类必须选'))
                    return false
                }
                if (this.sbForm.goodsType == null || this.sbForm.goodsType === '') {
                    this.$message.error(new Error('商品的名称必须选'))
                    return false
                }
                if (this.sbForm.lossNum == null || this.sbForm.lossNum === '') {
                    this.$message.error(new Error('损耗数量必须填写'))
                    return false
                } else {
                    let r = /^[1-9]\d*$/
                    if (!r.test(this.sbForm.lossNum)) {
                        this.$message.error(new Error('商品的数量必须为正整数(0除外)'))
                        return false
                    }
                }
                if (this.sbForm.goodsUnit == null || this.sbForm.goodsUnit === '') {
                    this.$message.error(new Error('商品的单位必须选'))
                    return false
                }
                if (this.sbForm.desc == null || this.sbForm.desc === '') {
                    this.$message.error(new Error('损耗原因必填'))
                    return false
                }
                this.$axios.post('updateLossList',{
                    id:this.id,
                    goodsType: this.sbForm.goodsType,
                    goodsName: this.sbForm.goodsName,
                    lossNum: this.sbForm.lossNum,
                    goodsUnit: this.sbForm.goodsUnit,
                    lossDescription:this.sbForm.desc
                }).then(resp => {
                    if (resp.data == '修改成功') {
                        this.$message.success(resp.data)
                    }else{ this.$message.error(resp.data)}
                    this.dialogForm=false
                    initTable(this)

                })

    },

            //编辑监听
            handleEdit(index, row) {
                this.dialogForm = true
                this.id = row.id
                this.sbForm.goodsType = row.goodsType
                this.sbForm.goodsName = row.goodsName
                this.sbForm.lossNum = row.lossNum
                this.sbForm.goodsUnit=row.goodsUnit
                this.sbForm.desc=row.lossDescription
                this.$axios.post('getLossGoodsType').then(resp => {
                    if (resp) {
                        this.sbForm.select1 = resp.data.goodsType
                    }
                })
            },
        }
    }

    function initTable($this) {
        $this.$axios.post("lossList", {
            page: $this.page,
            size: $this.size,
            startTime: $this.Form.startTime.toString().split(",")[0],
            overTime: $this.Form.startTime.toString().split(",")[1],
            goodsType: $this.goodsType,
            goodsName: $this.goodsName
        }).then(resp => {
            if (resp) {
                $this.tableData = resp.data.lossList
                $this.total = resp.data.count
            }
        })
    }
</script>

<style scoped>

</style>
